<template>
  <div class="scene_item">
    <div class="container" ref="imageContainer">
      <img
        ref="bkImage"
        class="bkg"
        src="../assets/bg_5.jpg"
        alt=""
        @click="touchImage"
      />
      <div class="tool numbers">
        <img src="../assets/number.png" class="bg" alt="" />
        <img
          v-if="dangerNumber === 3"
          src="../assets/3.png"
          class="nbg"
          alt=""
        />
        <img
          v-if="dangerNumber === 2"
          src="../assets/2.png"
          class="nbg"
          alt=""
        />
        <img
          v-if="dangerNumber === 1"
          src="../assets/1.png"
          class="nbg"
          alt=""
        />
        <img
          v-if="dangerNumber === 0"
          src="../assets/0.png"
          class="nbg"
          alt=""
        />
      </div>
      <div class="tool ads" @click="adsHandler">
        <img id="ads" src="../assets/ads.png" alt="" />
      </div>
      <div class="tool tips" @click="tipsHandler">
        <img id="tips" src="../assets/tips.png" alt="" />
      </div>
      <div class="tool back" @click="backHome">
        <img id="back" src="../assets/back_btn.png" alt="" />
      </div>
      <img
        v-if="point_1.show"
        id="point1Ele"
        class="point"
        :style="{
          top: point_1.position[1] + '%',
          left: point_1.position[0] + '%',
        }"
        src="../assets/yes.png"
        alt=""
      />
      <img
        v-if="point_2.show"
        id="point2Ele"
        class="point"
        :style="{
          top: point_2.position[1] + '%',
          left: point_2.position[0] + '%',
        }"
        src="../assets/yes.png"
        alt=""
      />
      <img
        v-if="point_3.show"
        id="point3Ele"
        class="point"
        :style="{
          top: point_3.position[1] + '%',
          left: point_3.position[0] + '%',
        }"
        src="../assets/yes.png"
        alt=""
      />
      <img
        v-if="wrong.show"
        id="wrongEle"
        class="wrong"
        :style="{
          top: wrong.position[1] + '%',
          left: wrong.position[0] + '%',
        }"
        src="../assets/wrong.png"
        alt=""
      />

      <ads-dialog
        :visible="showAdsDialog"
        @close="handleClose('adsDialog')"
      ></ads-dialog>
      <tips-dialog
        :visible="showTipsDialog"
        :type="5"
        @close="handleClose('tipsDialog')"
      ></tips-dialog>
      <back-dialog
        :visible="showBackDialog"
        @close="handleClose('backDialog')"
      ></back-dialog>
      <complete-dialog
        :visible="showCompleteDialog"
        @close="handleClose('completeDialog')"
      ></complete-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import BackDialog from "../components/BackDialog.vue";
import TipsDialog from "../components/TipsDialog.vue";
import AdsDialog from "../components/AdsDialog.vue";
import CompleteDialog from "../components/CompleteDialog.vue";
import {
  clickAnimation,
  dialogVisibleAnimation,
  playSound,
} from "../utils/animation";
import { imgTouchPosition, storageState } from "../utils/utils";

const imageContainer = ref<HTMLElement | null>(null);
const bkImage = ref<HTMLImageElement | null>(null);
const showBackDialog = ref(false);
const showTipsDialog = ref(false);
const showAdsDialog = ref(false);
const showCompleteDialog = ref(false);
const point_1 = reactive({
  show: false,
  position: [0, 0],
});
const point_2 = reactive({
  show: false,
  position: [0, 0],
});
const point_3 = reactive({
  show: false,
  position: [0, 0],
});
const pointList = ref([point_1, point_2, point_3]);
const wrong = reactive({
  show: false,
  position: [0, 0],
});
const timer = ref();
const dangerNumber = ref(3);

const adsHandler = () => {
  clickAnimation("ads", 200, () => {
    dialogVisibleAnimation("adsDialog", 200, true, () => {
      showAdsDialog.value = true;
    });
  });
};
const tipsHandler = () => {
  clickAnimation("tips", 200, () => {
    dialogVisibleAnimation("tipsDialog", 200, true, () => {
      showTipsDialog.value = true;
    });
  });
};
const backHome = () => {
  clickAnimation("back", 200, () => {
    dialogVisibleAnimation("backDialog", 200, true, () => {
      showBackDialog.value = true;
    });
  });
};
const handleClose = (id: string) => {
  dialogVisibleAnimation(id, 800, false, () => {
    showTipsDialog.value = false;
    showAdsDialog.value = false;
    showBackDialog.value = false;
    if (id === "completeDialog") {
      showCompleteDialog.value = false;
      // 重置场景
      dangerNumber.value = 3;
      pointList.value.forEach((item) => {
        item.show = false;
        item.position = [0, 0];
      });
    }
  });
};
const touchImage = (e: MouseEvent) => {
  const width = bkImage.value!.clientWidth;
  const height = bkImage.value!.clientHeight;
  const x = Number(((e.clientX / width) * 100).toFixed(2));
  const y = Number(((e.clientY / height) * 100).toFixed(2));
  console.log(x, y);
  const target = imgTouchPosition(5, x, y);
  if (target) {
    console.log("选中了" + target.id);
    playSound("clickYesMusic");
    if (target.id === "1") {
      point_1.show = true;
      point_1.position = target.img;
    } else if (target.id === "2") {
      point_2.show = true;
      point_2.position = target.img;
    } else if (target.id === "3") {
      point_3.show = true;
      point_3.position = target.img;
    }
    dangerNumber.value = pointList.value.filter((item) => !item.show).length;
    if (dangerNumber.value === 0) {
      dialogVisibleAnimation("completeDialog", 200, true, () => {
        showCompleteDialog.value = true;
        // 存储完成状态
        storageState(4);
      });
    }
  } else {
    if (timer.value) {
      clearTimeout(timer.value);
    }
    wrong.show = true;
    wrong.position = [x, y];
    playSound("clickNoMusic");
    timer.value = setTimeout(() => {
      wrong.show = false;
    }, 1000);
  }
};
</script>

<style lang="scss"></style>
